<template>
  <div class="counselor-detail">
    <!-- 头部区域 -->
    <div class="header">
      <el-button type="text" @click="goBack" class="back-button">
        <i class="el-icon-arrow-left"></i> 返回
      </el-button>
      <div class="title-container">
        <div class="title">咨询师库 / <span class="highlight">咨询师详情</span></div>
        <div class="subtitle">管理咨询师个人信息及简介</div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 基本信息卡片 -->
      <el-card class="section-card" shadow="hover">
        <div class="section-header">
          <div class="section-title">
            <i class="el-icon-user"></i>
            <span>咨询师基本信息</span>
          </div>
          <el-button type="primary" size="medium" @click="saveBasicInfo" class="save-btn">
            <i class="el-icon-check"></i> 保存
          </el-button>
        </div>

        <el-divider class="custom-divider" />

        <div class="form-container">
          <el-form :model="counselorInfo" :rules="rules" label-width="100px" size="medium">
            <div class="form-columns">
              <div class="form-left">
                <el-form-item label="姓名" prop="name" class="form-item">
                  <el-input v-model="counselorInfo.name" placeholder="请输入姓名" clearable>
                    <template #prefix>
                      <i class="el-icon-user"></i>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="性别" prop="gender" class="form-item">
                  <el-radio-group v-model="counselorInfo.gender">
                    <el-radio-button label="男性">男性</el-radio-button>
                    <el-radio-button label="女性">女性</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="手机号码" prop="phone" class="form-item">
                  <el-input v-model="counselorInfo.phone" placeholder="请输入手机号码" clearable>
                    <template #prefix>
                      <i class="el-icon-phone"></i>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="身份证号码" prop="idCard" class="form-item">
                  <el-input v-model="counselorInfo.idCard" placeholder="请输入身份证号码" clearable show-password>
                    <template #prefix>
                      <i class="el-icon-document"></i>
                    </template>
                  </el-input>
                  <div class="id-card-tip">（仅后台可见）</div>
                </el-form-item>

                <el-form-item label="毕业院校" prop="school" class="form-item">
                  <el-input v-model="counselorInfo.school" placeholder="请输入毕业院校" clearable>
                    <template #prefix>
                      <i class="el-icon-school"></i>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="学历" prop="education" class="form-item">
                  <el-select v-model="counselorInfo.education" placeholder="请选择学历" clearable>
                    <template #prefix>
                      <i class="el-icon-reading"></i>
                    </template>
                    <el-option label="大专" value="大专"></el-option>
                    <el-option label="本科" value="本科"></el-option>
                    <el-option label="硕士" value="硕士"></el-option>
                    <el-option label="博士" value="博士"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="校区" prop="campus" class="form-item">
                  <el-select v-model="counselorInfo.campus" placeholder="请选择校区" clearable>
                    <template #prefix>
                      <i class="el-icon-location-information"></i>
                    </template>
                    <el-option label="校区A" value="校区A"></el-option>
                    <el-option label="校区B" value="校区B"></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="form-right">
                <el-form-item label="头像" prop="avatar" class="avatar-form-item">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <div v-if="imageUrl" class="avatar-container">
                      <img :src="imageUrl" class="avatar" />
                      <div class="avatar-hover">
                        <i class="el-icon-upload"></i>
                        <span>更换头像</span>
                      </div>
                    </div>
                    <div v-else class="avatar-uploader-placeholder">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div>上传头像</div>
                    </div>
                  </el-upload>
                  <div class="tips">
                    <p><i class="el-icon-info"></i> 5M以下一张图片，仅支持一般图片格式（PNG、JPG）</p>
                    <p><i class="el-icon-info"></i> 系统自带按建议比例剪切功能</p>
                    <p><i class="el-icon-info"></i> 建议上传295*413像素图片</p>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </el-card>

      <!-- 简介卡片 -->
      <el-card class="section-card" shadow="hover">
        <div class="section-header">
          <div class="section-title">
            <i class="el-icon-document"></i>
            <span>咨询师简介</span>
          </div>
          <el-button type="primary" size="medium" @click="saveIntroduction" class="save-btn">
            <i class="el-icon-check"></i> 保存
          </el-button>
        </div>

        <el-divider class="custom-divider" />

        <div class="form-container">
          <el-form :model="counselorInfo" label-width="100px" size="medium">
            <el-form-item label="标题" class="form-item">
              <el-input
                v-model="counselorInfo.title"
                placeholder="请在这里输入标题..."
                clearable
                class="title-input"
              >
                <template #prefix>
                  <i class="el-icon-edit"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="正文" class="form-item">
              <el-input
                type="textarea"
                v-model="counselorInfo.content"
                placeholder="请在这里写正文..."
                :rows="8"
                resize="none"
                class="content-textarea"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const counselorInfo = ref({
  name: '',
  gender: '',
  phone: '',
  idCard: '',
  school: '',
  education: '',
  campus: '',
  avatar: '',
  title: '',
  content: ''
});

const imageUrl = ref('');

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号码格式不正确', trigger: 'blur' }
  ],
  school: [
    { required: true, message: '请输入毕业院校', trigger: 'blur' }
  ],
  education: [
    { required: true, message: '请选择学历', trigger: 'change' }
  ],
  campus: [
    { required: true, message: '请选择校区', trigger: 'change' }
  ],
  avatar: [
    { required: true, message: '请上传头像', trigger: 'change' }
  ]
};

const handleAvatarSuccess = (response: any) => {
  imageUrl.value = response.url;
  counselorInfo.value.avatar = response.url;
  ElMessage.success('头像上传成功');
};

const beforeAvatarUpload = (rawFile: any) => {
  const isLt5M = rawFile.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    ElMessage.error('上传头像图片大小不能超过 5MB!');
    return false;
  }
  const isImage = /^image\/(png|jpg|jpeg)$/.test(rawFile.type);
  if (!isImage) {
    ElMessage.error('仅支持上传 PNG、JPG、JPEG 格式的图片!');
    return false;
  }
  return true;
};

const saveBasicInfo = () => {
  console.log('保存基本信息:', counselorInfo.value);
  ElMessage.success('基本信息保存成功');
};

const saveIntroduction = () => {
  console.log('保存简介:', counselorInfo.value);
  ElMessage.success('简介保存成功');
};

const goBack = () => {
  router.go(-1);
};
</script>

<style scoped lang="scss">
.counselor-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .back-button {
      margin-right: 20px;
      padding: 8px 12px;
      font-size: 14px;
      color: #409eff;
      transition: all 0.3s;

      &:hover {
        background-color: rgba(64, 158, 255, 0.1);
        border-radius: 4px;
      }

      i {
        margin-right: 5px;
      }
    }

    .title-container {
      flex: 1;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333;

        .highlight {
          color: #409eff;
        }
      }

      .subtitle {
        font-size: 12px;
        color: #909399;
        margin-top: 5px;
      }
    }
  }

  .content {
    .section-card {
      margin-bottom: 20px;
      border-radius: 8px;
      border: none;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .section-title {
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          color: #333;

          i {
            margin-right: 8px;
            color: #409eff;
          }
        }

        .save-btn {
          padding: 8px 15px;
          border-radius: 4px;

          i {
            margin-right: 5px;
          }
        }
      }

      .custom-divider {
        margin: 10px 0 20px;
      }

      .form-container {
        .form-columns {
          display: flex;
          gap: 40px;

          .form-left {
            flex: 1;

            .form-item {
              margin-bottom: 20px;

              :deep(.el-input__prefix) {
                display: flex;
                align-items: center;
                padding: 0 8px;
                color: #c0c4cc;
              }

              :deep(.el-radio-group) {
                width: 100%;

                .el-radio-button {
                  flex: 1;

                  :deep(.el-radio-button__inner) {
                    width: 100%;
                  }
                }
              }
            }
          }

          .form-right {
            width: 300px;
            display: flex;
            justify-content: center;

            .avatar-form-item {
              width: 100%;

              :deep(.el-form-item__content) {
                display: flex;
                flex-direction: column;
                align-items: center;
              }
            }
          }
        }
      }
    }
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    transition: all 0.3s;

    &:hover {
      border-color: #409eff;
    }

    .avatar-container {
      position: relative;
      width: 100%;
      height: 100%;

      .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .avatar-hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s;

        i {
          font-size: 24px;
          margin-bottom: 5px;
        }
      }

      &:hover .avatar-hover {
        opacity: 1;
      }
    }

    .avatar-uploader-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #8c939d;
      padding: 20px;

      .avatar-uploader-icon {
        font-size: 28px;
        margin-bottom: 10px;
      }
    }
  }

  .tips {
    margin-top: 15px;
    color: #909399;
    font-size: 12px;
    line-height: 1.6;
    width: 180px;

    p {
      margin: 5px 0;
      display: flex;
      align-items: center;

      i {
        margin-right: 5px;
        color: #409eff;
      }
    }
  }

  .id-card-tip {
    position: absolute;
    right: 10px;
    top: 0;
    color: #909399;
    font-size: 12px;
    line-height: 40px;
  }

  .title-input {
    :deep(.el-input__inner) {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .content-textarea {
    :deep(.el-textarea__inner) {
      font-size: 14px;
      line-height: 1.6;
      padding: 15px;
      border-radius: 4px;
      transition: all 0.3s;

      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }
  }
}
</style>